<template>
  <div>
      <div id="back"></div>
      <div style="padding-left: 1850px;">
      <el-button type="info" icon="el-icon-user-solid" circle @click="dialogVisible = true"></el-button><br />
      <span style="font-size: 10px;" >&nbsp;&nbsp;注册</span>
    </div>
    <el-dialog title="注册" :gutter="20" :visible.sync="dialogVisible" width="30%" @close="closeDialog" :close-on-click-modal="false">

      <!-- 定义用户提交表单数据-->
      <el-form :model="addUserModel" :rules="rules" ref="addUserRef" label-width="100px" class="demo-ruleForm">

        <el-form-item  prop="name" label="用户名">
          <el-col span="20">
          <el-input v-model="addUserModel.name" placeholder="用户名"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item  prop="phone" label="手机号">
          <el-col span="20">
          <el-input v-model="addUserModel.phone" placeholder="手机号"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item  prop="code" label="验证码">
          <el-col span="20">
          <el-input placeholder="验证码" v-model="addUserModel.code"></el-input><br/>
          <el-button :disabled="disabled" @click="sendcode" class="sendcode"
          style="margin-top: 10px;" type="primary">{{btntxt}}</el-button>
          </el-col>
        </el-form-item>

        <el-form-item prop="password" label="密码">
          <el-col span="20">
          <el-input placeholder="密码" v-model="addUserModel.password" show-password></el-input>
          </el-col>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addUserBtn">注册</el-button>
        <el-button @click="clear">重置</el-button>
      </span>
      <div style="padding-left:135px"><el-checkbox v-model="checked">我已阅读并同意<router-link to="">《好来屋用户注册协议》</router-link></el-checkbox></div>
       <div>已有账号去<router-link to="login">登录</router-link></div>
    </el-dialog>


  </div>
</template>

<script>

  export default {
    data(){

      const checkPhone = (rule, value, callback) => {

        //定义校验手机号的正则语法
        const phoneRege = /^1[34578][0-9]{9}$/
        if (phoneRege.test(value)) {

          return callback()
        }
        callback(new Error('请填写正确的手机号'))

      }

      const checkCode = (rule, value, callback) => {
        const code = /^[0-9]{6}$/
          if (code.test(value)) {

            return callback()
          }
          callback(new Error('请填写正确的验证码'))

        }


      return {
        checked: false,
        disabled:false,
         time:60,
         btntxt:"发送验证码",

        userList: [],
        //记录总数是数值类型
        total: 0,
        dialogVisible: true,
        addUserModel: {
          name: "",
          phone:  '',
          code: '',
          password: '',

        },
        //数据校验规则
        rules: {
          name: [
                  { required: true, message: '请输入用户名', trigger: 'blur' },
                  { min: 1, max: 8, message: '长度为1-8个字符', trigger: 'blur' },
                ],

          phone: [
                  { required: true, message: '请输入手机号', trigger: 'blur' },
                  { min: 11, max: 11, message: '请输入正确手机号', trigger: 'blur' },
                  { validator: checkPhone , trigger: 'blur' }
                ],

          password: [
                  { required: true, message: '请输入密码', trigger: 'blur' },
                  { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
                ],

          code: [
                  { required: true, message: '请输入验证码', trigger: 'blur' },
                  { min: 6, max: 6, message: '长度为6个字符', trigger: 'blur' },
                  { validator: checkCode, trigger: 'blur' }
                ]
        }
      }
    },
    methods: {

      //校验用户数据
      addUserBtn(){
        this.$refs.addUserRef.validate(async valid => {
          //如果校验失败 则停止数据
          if(!valid) return
          if(this.checked!==true){
            alert("请勾选同意《好来屋用户注册协议》!")
            return
          }
          const {data: result} = await this.$http.post('/register/addUser',this.addUserModel)
          if(result.status !== 200) return this.$message.error("用户名已被注册")
          this.$message.success("注册成功")
          this.addUserModel={}
          this.$router.push("/login")
        })
      },

      sendcode(){
       this.time=60;
       this.codeMsg();
       this.getCode();
       },
       //发送手机验证码倒计时

       codeMsg(){
         if(this.addUserModel.phone.length!==11){
             alert("请输入正确的手机号")
             return
           }
         
         if (this.time > 0) {
          this.disabled=true;
          this.time--;
          this.btntxt=this.time+"秒后重新发送";
          setTimeout(this.codeMsg, 1000);
         } else{
          this.time=0;
          this.btntxt="发送验证码";
          this.disabled=false;
         }
       },
       clear(){
         this.addUserModel={}
       }
      
    }
  }
</script>

<style>
    #back{
    		width: 100%;
    		  	height: 100vh;
    		  	background: url("../images/1.png") center center no-repeat;
    		  	background-size: 100% 100%;
    			z-index: -1;
    			position: absolute;
    	}

</style>
